<template>
    <div class="return" @click="goBack">
        <img src="../assets/images/teacher/public/arrow-left-bold.svg" alt="返回">
    </div>
    <div class="container">
        <div class="step">
            <el-steps :active="active" finish-status="wait" align-center="true">
                <el-step title="基本信息" style=" font-family: Source Han;  color: #707070;" />
                <el-step title="内容设置" />
            </el-steps>
        </div>
        <div class="baseInfor">
            <div class="information">
                <p class="title">课程信息</p>
                <div class="inforConBox">
                    <div class="inforBox">
                        <div class="inforCon1">
                            <p><span style="width: 19%;" class="state">课程名称: </span><input type="text"
                                    v-model="data.courseName"></p>
                            <p><span style="width: 19%;" class="state">所属院系:</span>
                                <input type="text" disabled :value="userInfo.college">
                            </p>
                            <p><span style="width: 19%;" class="state">开课时间: </span>
                                <span class="dateBox">
                                    <el-date-picker class="date"
                                        style="width: 60%; display: inline-block;	 line-height: 1em;" v-model="data.date"
                                        type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format = 'YYYY-MM-DD'
                                         />
                                </span>
                                <span style="font-family: Source Han Sans CN;font-size: 1em;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 31px;
                        letter-spacing: 0px;
                        color: #707070;"><input type="checkbox" name="" id=""
                                        style="height: 34%; width: 7%; " v-model="data.isPermanent">永久</span>
                            </p>
                        </div>
                        <div class="inforCon2">
                            <p><span class="state">课程申报人: </span><input type="text" name="" id="" :value="userInfo.name" disabled></p>
                            <p><span class="state">课程类型: </span><input type="text" name="" id="" v-model="data.courseType"></p>
                            <p style="display:flex;">
                                <span class="state">课程附件上传:</span>
                                <span>
                                    <UploadFile @getFileIdList="getFileIdList" ref="uploadFile"></UploadFile>
                                </span>
                            </p>
                        </div>

                    </div>
                    <div class="avatar">
                        <img src="../assets/images/teacher/addCourse/CourseCover.jpg" alt="图片无法显示">
                    </div>
                </div>
            </div>
        </div>
        <div class="detailData">
            <p class="title">指导老师</p>
            <div class="table">
                <Table :tableList="tableList" @getTableList="getTableList"></Table>
            </div>
            <div class="but">
                    <el-button @click="next()">下一步</el-button>
            </div>
        </div>
    </div>
</template>
<script setup >
import { ref, watch, reactive, defineEmits, defineProps, onMounted } from 'vue'
import { getUserData } from '../utils/index';
import UploadFile from './UploadFile.vue';
import Table from './TeacherTable.vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

const emits = defineEmits(['changePage', 'getAddCourseInfo']);

const router = useRouter();

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}

//请求基本信息
let uid = userData.id;

const userInfo = reactive({
    college: '',
    name: ''
})


//得到基本信息 
axios({
    headers: {
        'Content-Type': 'application/w-www-form-urlencoded',
        'Token': userData.Token,
    },
    method: 'get',
    url: 'http://api.linwine.space/api/sjk/user/home_page/' + uid,
    responseType: "json",
}).then((data) => {
    console.log(data);
    let { college, major,  name} = data.data.data;
    userInfo.college = college+"/"+major
    userInfo.name = name
})

//当前组件展示的值
const data = reactive({
    courseName: '',
    courseType: '',
    isPermanent: false,
    date: '',
    fileId: '',
    gTeacherId:'',
    tableList: [],
})



//从子组件中得到表格信息
const getTableList = function(tableData){
    //实时更新tableList的值
    data.tableList = tableData;
}


//上传文件
let fileIdList = [];
const getFileIdList = function(fileId){
    fileIdList[fileIdList.length] = fileId;
    data.fileId = fileIdList
}


//返回上一页
const goBack = function () {
    router.go(-1);
}

const uploadFile = ref()

//点击切换下一步
const active = ref(0)
const next = () => {
    
    //切换时将当前值传给父页面
    let courseInfo = data
    // courseInfo.tableList = tableFinalList.value.tableData
    emits('getAddCourseInfo', courseInfo, 0)
    emits('changePage', 1)
}

//提交最终文件列表
const submit = function(){
    uploadFile.value.uploadFileTruly()
}

defineExpose({
    submit
})
</script>
<style scoped>
.return {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    left: 1%;
    top: 1%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4.2%;
    padding-top: 3%;
}

.step {
    width: 97%;
}

:deep .el-input__wrapper {
    background: #f9f9f9;
    outline: none;
}

:deep .el-range-editor.is-active {
    box-shadow: 0 0 0 0px inset !important;
}

:deep .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 0px inset !important;
}

.baseInfor {
    width: 100%;
    height: 200px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    margin-top: 2.5%;
    box-sizing: content-box;
}

.title {
    font-family: Source Han Sans CN;
    font-size: 1.3em;
    font-weight: bolder;
    font-stretch: normal;
    line-height: 37px;
    letter-spacing: 0px;
    color: #707070;
    width: 40%;
}

.avatar {
    width: 149px;
    height: 199px;
    margin-top: -3%;
    /* border: #707070 1px solid; */
}

.avatar img {
    width: 149px;
    height: 199px;
}

.information {
    width: 100%;
    box-sizing: content-box;
}

.inforConBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 71%;
}

.inforBox {
    justify-content: space-between;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    padding: 1.3%;
    padding-left: 1.2%;
    padding-right: 1.2%;
    background-color: #efefef;
    margin-right: 1%;
}

.inforCon1,
.inforCon2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inforCon1 {
    width: 45%;
}

.inforCon2 {
    width: 50%;
}

.state {
    width: 24%;
    text-align: right;
    margin-right: 4%;
    display: inline-block;
    font-family: Source Han Sans CN;
    font-size: 1em;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #707070;
}

.inforCon1 input,
.inforCon2 input {
    height: 100%;
    width: 60%;
    outline: none;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1.4px #dcdfe6;
    opacity: 0.6;
    padding-left: 2.4%;
}

.inforCon1 input:hover,
.inforCon2 input:hover {
    border: 1.6px solid #c0c4cc;
    transition: 0.2s;
}

.dateBox {
    width: 100%;
    border-radius: 6px;
}

.date {
    width: 100px;
}

.detailData {
    padding-top: 2.5%;
    width: 100%;
    height: 54%;
    box-sizing: content-box;
}

.detailCon {
    width: 100%;
    flex: 1;
    margin-top: 1%;
    background-color: white;
}

.but {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 4.4%;
}

.but button {
    width: 200px;
    height: 40px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 31px;
    letter-spacing: 0px;
    color: #fafafa;
    margin-top: 26px;
}

.but button:hover {
    background-color: #707070;
}

:deep .el-button--primary {
    width: 112px;
    height: 20px;
    background: url(../../assets/images/teacher/addCourse/upload.svg) no-repeat 12.5% center;
    background-color: #ffffff;
    border-radius: 6px;
    border: solid 1px #707070;
    opacity: 0.6;
    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #707070;
}

:deep .el-button--primary:hover {
    background-color: #efefef;
}

:deep .el-upload-list {
    position: absolute;
}

:deep .el-select .el-input {
    width: 104%;
}

.table {
    width: 100%;
    height: 200px;
    margin-top: 15px;
}
</style>